<template>
	<view id="setting">
		<view class="status_bar">
			<!-- 这里是状态栏 -->
		</view>

		<view class="body">
			<scroll-view :scroll-y="true" style="height: 100%;">
				<view style="overflow: hidden;">
					<picker class="btn-box" mode="selector" :range="languages" :value="currLangIndex"
						@change="onLangChange">
						<view class="txt"> {{languages[currLangIndex]}} </view>
					</picker>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	/**
	 * @todo 清除runewords 考虑是否影响exclusions
	 * @todo 清除exclusions
	 * */
	import $utils_ from '@/utils/common.js';
	import $cst_ from '@/utils/constant.js';
	export default {
		data() {
			return {
				languages: [],
				system: {},
				langs: $cst_.LANGS,
				currLangIndex: 0,
			}
		},
		created() {
			const _this = this;
			_this.languages = _this.$t('global.languages');

			let system_params = _this.getSysParams();


			let _i = _this.langs.findIndex((el => el === system_params.lang));
			if (_i !== -1) {
				_this.currLangIndex = _i;
			} else {
				_this.currLangIndex = 0;
				console.error("设置语言异常");
			}

		},
		onLoad() {},
		methods: {
			onLangChange(e) {
				const _this = this;
				try {
					// throw new Error("test");
					
					// 设置当前选项值
					_this.currLangIndex = e.target.value;
					// 保存值
					let system_params = _this.getSysParams();
					system_params.lang = _this.langs[e.target.value];
					uni.setStorageSync($cst_.KEY_SYS_PARAMS, $utils_.JSONStringify(system_params));

					// 修改i18n和uni.locale
					_this._i18n.locale = _this.langs[e.target.value];

					if (_this._i18n.locale === 'zh-CN') {
						uni.setLocale("zh-Hans");
					} else if (_this._i18n.locale === 'en') {
						uni.setLocale("en");
					}

					// 修改选项菜单内容（语言改了，它也改；其实也可以不改，用通用的,如: ["english","简体中文","繁體中文",……]）
					_this.languages = _this.$t('global.languages');

					// 动态调整tabbar和tittle
					_this.refreshTitleAndBar();

					uni.showToast({
						title: _this.$t('global.note.set_success'),
						image: '/static/img/toast/success.png',
						duration: 1000
					});

				} catch (err) {
					
					// @todo 恢复修改前的状态
					
					console.error("修改语言失败", err);
					uni.showToast({
						title: _this.$t('global.note.set_failed'),
						image: '/static/img/toast/failure.png',
						duration: 1000
					});
				}
			},
			// 刷新标题和tabbar国际化
			refreshTitleAndBar() {
				const _this = this;
				// 设置tabbar文字
				// console.log(_this.$t('global.tabbar'));
				_this.$t('global.tabbar').forEach((el, i) => {
					uni.setTabBarItem({
						index: i,
						text: el
					});
				});
			},
			getSysParams() {
				const SYS_PARAMS_DEFAULT = {
					lang: 'en'
				}; // 默认app语言英文
				let res = {};
				try {
					let data = uni.getStorageSync($cst_.KEY_SYS_PARAMS);
					if (data) {
						res = $utils_.JSONParse(data);
					} else {
						// 按理不应该走这边，app.vue已经设置过了，以防万一
						uni.setStorageSync($cst_.KEY_SYS_PARAMS, $utils_.JSONStringify(SYS_PARAMS_DEFAULT));
						res = SYS_PARAMS_DEFAULT;
						console.warn("system_params init");
					}
				} catch (err) {
					res = SYS_PARAMS_DEFAULT;
					console.error('获取系统参数失败！', err);
				}
				return res;
			},
		},
		mounted() {

		},
		onReady() {
			const _this = this;
			_this.refreshTitleAndBar();
		},
		onLoad() {
			// console.log('加载了...');
			const _this = this;
		},
	}
</script>

<style lang="scss">
	#setting {

		background-color: rgb(28, 28, 28);
		height: 100%;
		/* background-color: yellow; */
		/* background-color: #F9FBFF; */
		/* background-color: #efefef; */

		.status_bar {
			// background-color: blue;
			position: fixed;
			top: 0;
			height: var(--status-bar-height);
			width: 100%;

			// background-color: #f5f5f5; // 防透视.data_area
			background-color: rgb(28, 28, 28);
			z-index: 99;
		}

		.body {
			// background-color: pink;
			padding-top: var(--status-bar-height);
			height: calc(100% - var(--status-bar-height));
			width: 100%;
			position: relative;

			.btn-box {
				height: 80rpx;
				margin: 20rpx auto;
				width: 400rpx;
				border: 4rpx solid #dfdfdf;
				border-radius: 10rpx;

				.txt {
					text-align: center;
					line-height: 80rpx;
					color: white;
				}
			}

		}
	}
</style>